<!DOCTYPE html>
<html lang="zhcn">

	<head>
		<meta charset="UTF-8">
		<title>GH_Piker2</title>
		<link rel="stylesheet" href="res/static/layui/css/layui.css">
		<link rel="stylesheet" href="res/static/layui/css/layui-theme-dark.css">
		<link rel="stylesheet" href="res/css/style.css">
	</head>

	<body id="main">

		<div class="win_from">
			<!-- 【标题栏】 -->
			<div class="win_title">
				<div class="win_drag"></div>
				<p>GHPIKER2</p>
				<div class="win_control">
					<div class="win_btn min"></div>
					<div class="win_btn max"></div>
					<div class="win_btn close"></div>
				</div>
			</div>



			<!-- 【窗口页面】 -->
			<div class="win_content">


				<!-- 色盘页 -->
				<div class="page page_1">

					<!-- 色轮区域 -->
					<div class="color_piker">
						<div class="piker" id="picker_1"></div>

						<div class="color color_1"></div>
						<div class="color color_2"></div>

						<input class="color_hex" type="text" value="#FFFFFF" maxlength="7">
					</div>



					<!-- 历史色彩 -->
					<div class="color_card">
						<p>历史色彩</p>
						<ul class="card" id="old_color">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</div>


					<!-- 常用颜色 -->
					<div class="color_card" id="Collect">
						<p>常用颜色</p>
						<ul class="card card1">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
						<ul class="card card2">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</div>
				</div>





				<!-- 调色页 -->
				<div class="page page_2">
					<!-- 色轮区域 -->
					<div class="color_piker">
						<div class="piker" id="picker_2"></div>

						<div class="color color_1"></div>
						<div class="color color_2"></div>

						<input class="color_hex" type="text" value="#FFFFFF" maxlength="7">
					</div>

					<div class="color_card">
						<div class="piker_h"></div>
						<p class="t_1">色相</p>
						<p class="t_2">饱和度</p>
						<p class="t_3">明度</p>
					</div>
				</div>



				<!-- 潘通色卡页 -->
				<div class="page page_4">
					<div class="pantone_seach">
						<input type="text" placeholder="请输入标准色号, 如: #FFFFFF">
						<button>
							<i class="layui-icon layui-icon-search"></i>
						</button>
					</div>

					<div class="pantone">
						<!--<div class="card"></div>-->
					</div>
					<div class="pantone2">
						<h1>PANTONE</h1>
						<h2 class="code">485 XGC</h2>

						<p><span class="t">RGB</span><span class="rgb">216 37 32</span></p>
						<p><span class="t">HEX</span><span class="hex">#D82520</span></p>
						<p><span class="t">CMYK</span><span class="cmyk">0 96 100 0</span></p>
					</div>
				</div>
			</div>





			<!-- 【导航栏】 -->
			<div class="win_nav">
				<ul>

					<li page="1" class="sel">
						<div class="icon">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.43 22.43">
								<g>
									<g>
										<rect x="0.03" y="0.03" width="22.37" height="22.37" style="fill: none;stroke: #126dff;stroke-miterlimit: 10;stroke-width:0px;" />
										<path d="M11.21,4.38a6.83,6.83,0,1,1-6.83,6.83,6.84,6.84,0,0,1,6.83-6.83m0-4.35A11.19,11.19,0,1,0,22.4,11.21,11.19,11.19,0,0,0,11.21,0Z" />
									</g>
								</g>
							</svg>
						</div>
						<p>色板</p>
					</li>

					<li page="2">
						<div class="icon">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.43 22.43">
								<g>
									<g>
										<rect x="0.03" y="0.03" width="22.37" height="22.37" style="fill: none;stroke: #126dff;stroke-miterlimit: 10;stroke-width: 0px;" />
										<path d="M11.21.48a10.74,10.74,0,1,1,0,21.47c-1.75,0-.69-1.24-2.64-3.25S.48,17.92.48,11.21A10.72,10.72,0,0,1,11.21.48Zm2.35,13a2,2,0,1,0,2,2A2,2,0,0,0,13.56,13.5Zm3.69-4.3a1.34,1.34,0,0,0-1.34,1.34,1.36,1.36,0,0,0,1.34,1.35h0a1.35,1.35,0,1,0,0-2.69Zm-2-3.35a1.34,1.34,0,1,0,1.34,1.34A1.34,1.34,0,0,0,15.24,5.85ZM7.52,5.44A1.35,1.35,0,1,0,8.87,6.78,1.34,1.34,0,0,0,7.52,5.44Zm4-1.27a1.34,1.34,0,1,0,1.34,1.34A1.34,1.34,0,0,0,11.55,4.17Z" />
									</g>
								</g>
							</svg>
						</div>
						<p>调色</p>
					</li>

					<li page="3">
						<div class="icon">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.43 22.43">
								<g>
									<g>
										<rect x="0.03" y="0.03" width="22.37" height="22.37" style="fill: none;stroke: #126dff;stroke-miterlimit: 10;stroke-width: 0px;" />
										<path d="M21.73.68a2.18,2.18,0,0,0-3.1,0h0L16.52,2.8,14.86,1.1a1.39,1.39,0,0,0-2,2l.87.86L3.22,14.47l-.37,2.42L.65,19a2,2,0,0,0,2.79,2.79l2.14-2.14L8,19.25,18.51,8.71l.88.86a1.39,1.39,0,1,0,2-2L19.61,5.87l2.08-2.08a2.19,2.19,0,0,0,0-3.1Zm-10,12.73H6.26l8.49-8.49,2.79,2.8Z" />
									</g>
								</g>
							</svg>
						</div>
						<p>拾色器</p>
					</li>

					<li page="4">
						<div class="icon" style="transform: scale(0.96);">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.43 22.43">
								<g>
									<g>
										<rect x="0.03" y="0.03" width="22.37" height="22.37" style="fill: none;stroke: #126dff;stroke-miterlimit: 10;stroke-width: 0px;" />
										<path d="M10.39,6.65a2.78,2.78,0,0,0-.88-.57,2.82,2.82,0,0,0-1.08-.22,2.7,2.7,0,0,0-1.1.22,2.78,2.78,0,0,0-.88.57,2.73,2.73,0,0,0-.6.85,2.54,2.54,0,0,0,0,2.07,2.89,2.89,0,0,0,.6.86,2.81,2.81,0,0,0,.88.58,2.88,2.88,0,0,0,1.1.22,2.84,2.84,0,0,0,2-.8,2.89,2.89,0,0,0,.6-.86A2.54,2.54,0,0,0,11,7.5,2.73,2.73,0,0,0,10.39,6.65Zm9.8-5.09H2.25A2.17,2.17,0,0,0,0,3.69V18.74a2.17,2.17,0,0,0,2.22,2.12H20.18a2.17,2.17,0,0,0,2.22-2.12v-15a2.17,2.17,0,0,0-2.21-2.13Zm0,14.27c-.24-.53-.52-1.06-.83-1.61a10.36,10.36,0,0,0-1-1.49,5.4,5.4,0,0,0-1.22-1.09,2.53,2.53,0,0,0-1.38-.42,3,3,0,0,0-1.43.32,3.77,3.77,0,0,0-1,.79,7.6,7.6,0,0,0-.76,1c-.23.37-.46.71-.68,1a4.1,4.1,0,0,1-.74.8,1.51,1.51,0,0,1-1,.31,4.37,4.37,0,0,1-.95-.08,4.17,4.17,0,0,1-.7-.19A4.43,4.43,0,0,1,7.88,15a4.42,4.42,0,0,0-.58-.26,4.14,4.14,0,0,0-.72-.2,5.19,5.19,0,0,0-1-.08,2.05,2.05,0,0,0-.92.23,4.9,4.9,0,0,0-.89.59,7.81,7.81,0,0,0-.82.81,11.06,11.06,0,0,0-.71.89V4.65a1,1,0,0,1,1-1H19.17a1,1,0,0,1,1,1V15.83Z" />
									</g>
								</g>
							</svg>
						</div>
						<p>潘通</p>
					</li>

					<li page="5">
						<div class="icon" style="transform: scale(0.98);">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.43 22.43">
								<g>
									<g>
										<rect x="0.03" y="0.03" width="22.37" height="22.37" style="fill: none;stroke: #126dff;stroke-miterlimit: 10;stroke-width: 0px;" />
										<path d="M22.13,9a1,1,0,0,0-.8-.9h0A3.26,3.26,0,0,1,19.1,6.49a3.25,3.25,0,0,1-.32-2.72,1,1,0,0,0-.32-1.17A10.1,10.1,0,0,0,14.84.41a1.06,1.06,0,0,0-1.18.32,3.07,3.07,0,0,1-2.5,1.12A3.53,3.53,0,0,1,8.66.68,1.05,1.05,0,0,0,7.49.41,13.84,13.84,0,0,0,3.92,2.54a1,1,0,0,0-.37,1.18,3.7,3.7,0,0,1-.32,2.82A3.67,3.67,0,0,1,1,8.14c-.05,0-.05,0-.1,0a1.5,1.5,0,0,0-.7.8V9A10.76,10.76,0,0,0,0,11.22a9.36,9.36,0,0,0,.21,2.14,1,1,0,0,0,.8.9H1.1a3.25,3.25,0,0,1,2.18,1.65,3.25,3.25,0,0,1,.32,2.72,1,1,0,0,0,.32,1.17A9.72,9.72,0,0,0,7.59,22c.06,0,.11.06.22.06H8a1.23,1.23,0,0,0,.85-.38,3.25,3.25,0,0,1,2.5-1.12,3.53,3.53,0,0,1,2.5,1.18,1.15,1.15,0,0,0,.75.37.92.92,0,0,0,.37-.05,13.84,13.84,0,0,0,3.57-2.13,1,1,0,0,0,.37-1.18,3.7,3.7,0,0,1,.32-2.82,3.67,3.67,0,0,1,2.19-1.6c.05,0,.05,0,.1-.05a1.49,1.49,0,0,0,.69-.8v-.05a10.83,10.83,0,0,0,.22-2.19A15.28,15.28,0,0,0,22.13,9Zm-11,5.86a3.73,3.73,0,1,1,3.73-3.73A3.7,3.7,0,0,1,11.16,14.9Z" />
									</g>
								</g>
							</svg>
						</div>
						<p>设置</p>
					</li>
				</ul>
			</div>
		</div>

		<script src="res/static/js/require.js"></script>
		<script src="res/js/main.js"></script>
	</body>

</html>